import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import {
	HomeWrapper,
	HomeLeft,
	HomeRight,
	BackTop
} from './style';
import Topic from './components/Topic';
import List from './components/List';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import bannerImg1 from '../../statics/img/1.jpg';
import axios from 'axios';
import { actionCreators } from './store';

class Home extends PureComponent {
	
	componentDidMount() {
		this.props.initHomeData();
		this.bindEvents();
	}
	
	UNSAFE_componentWillUnmount() {
		window.removeEventListener('scroll', this.props.changeScrollTopShow);
	}
	
	handleScrollTop() {
		window.scrollTo(0, 0);
	}
	
	bindEvents() {
		window.addEventListener('scroll', this.props.changeScrollTopShow);
	}
	
	render() {
		const { showScroll } = this.props;
		return (
			<HomeWrapper>
				<HomeLeft>
					<img className="banner-img" src={ bannerImg1 } alt="" />
					<Topic />
					<List />
				</HomeLeft>
				<HomeRight>
					<Recommend />
					<Writer />
				</HomeRight>
				{
					showScroll ? <BackTop onClick={this.handleScrollTop}>顶部</BackTop> : null
				}
			</HomeWrapper>
		)
	}
}

const mapState = (state) => ({
	showScroll: state.getIn(['home', 'showScroll'])
})

const mapDisPatch = (dispatch) => ({
	initHomeData() {
		dispatch(actionCreators.getInitHomeData());
	},
	changeScrollTopShow(e) {
		if (document.documentElement.scrollTop > 400) {
			dispatch(actionCreators.toggleTopShow(true));
		} else {
			dispatch(actionCreators.toggleTopShow(false));
		}
	}
})

export default connect(mapState, mapDisPatch)(Home);